<template>
  <div class="inter">
    <div class="profit_head">
      <p>总收入（分）</p>
      <h3>{{profit}}</h3>
    </div>
    <div class="profit_head">
      <p>总支出（分）</p>
      <h3>{{profit}}</h3>
    </div>
    <div class="item" @click="openPicker1">
      <p class="itemp">开始时间</p>
      <p class="tim">{{startTime}}</p>
      <img src="http://sxian.oss-cn-beijing.aliyuncs.com/icon/arrow_right.svg" alt=""
           style="width: 5vw">
    </div>
    <div class="item" @click="openPicker2">
      <p class="itemp">结束时间</p>
      <p class="tim">{{endTime}}</p>
      <img src="http://sxian.oss-cn-beijing.aliyuncs.com/icon/arrow_right.svg" alt="" style="width: 5vw">
    </div>
    <mt-datetime-picker
      ref="picker1"
      type="datetime"
      v-model="startTimeControl"
      :startDate="minDate"
      :endDate="endDate"
      year-format="{value}"
      month-format="{value}月"
      date-format="{value}日"
      hour-format="{value}时"
      minute-format="{value}分"
      @confirm="timeStart"
    >
    </mt-datetime-picker>
    <mt-datetime-picker
      ref="picker2"
      type="datetime"
      v-model="endTimeControl"
      :startDate="minDate"
      :endDate="endDate"
      year-format="{value}"
      month-format="{value}月"
      date-format="{value}日"
      hour-format="{value}时"
      minute-format="{value}分"
      @confirm="timeEnd"
    >
    </mt-datetime-picker>
    <div class="btn_o">
      <BtnPrimary btn-text="确认查询" @click.native="checkOn" btn-width="53.33vw"></BtnPrimary>
    </div>
  </div>
</template>
<script type="text/ecmascript-6">
  import BtnPrimary from '@/components/common/BtnPrimary';

  export default {
    name: `integralcount`,
    components: {BtnPrimary},
    data() {
      return {
        state: true,
        // 时间数据
        startTimeControl: '',
        endTimeControl: '',
        startTime: '', // 查询开始时间
        endTime: '', // 查询结束时间
        minDate: new Date('2016'),
        endDate: new Date(),
        profit: '0.00' // 收益
      };
    },
    created() {
      this.date = new Date().toLocaleDateString();
    },
    methods: {
      openPicker1() {
        this.$refs.picker1.open();
      },
      openPicker2() {
        this.$refs.picker2.open();
      },
      timeStart(res) {
        this.startTimeControl = res;
        // 获取开始时间,拼接
        let timeString = `${res.getFullYear()}.${res.getMonth() + 1}.${res.getDate()} ${res.getHours()}:${res.getMinutes()}`;
        this.startTime = timeString; // 查询开始时间
        this.$refs.picker1.close();
      },
      timeEnd(res) {
        this.endTimeControl = res;
        let timeString = `${res.getFullYear()}.${res.getMonth() + 1}.${res.getDate()} ${res.getHours()}:${res.getMinutes()}`;
        this.endTime = timeString;// 查询结束时间
        this.$refs.picker2.close();
      },
      checkOn() {
        // 查询方法
        let msg = '';
        if (this.startTime !== '' && this.endTime !== '') {
          // 调用查询方法
        } else if (this.startTime === '') {
          msg = '未选择查询开始时间';
        } else if (this.endTime === '') {
          msg = '未选择查询结束时间';
        }
        if (msg) {
          alert(msg);
        } else {
          this.toCheck();
        }
      },
      toCheck() {
        // 查询实现方法
        console.log(this.startTimeControl, 'KIKI看i', this.startTimeControl);
        this.$Spread.searchIntergalAll({
          method: 'sumrebate',
          startTime: Date.parse(this.startTimeControl),
          endTime: Date.parse(this.endTimeControl)
        }).then(res => {
          if (res.sum) {
            this.profit = res.sum;
          } else {
            alert('未查询到数据');
          }
        });
      }
    }
  };
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
  @import "../../assets/stylus/main.styl"
  .inter {
    height: 100vh;
    background: #f5f5f5
  }

  .profit_head {
    flex-y();
    padding: 0 3vw;
    align-items: stretch;
    background: #fff;
    margin-bottom: 10px
    & p {
      flex-x();
      justify-content: flex-start;
      word(16px, #000);
      font-weight: bold
      line-height: vw(42px);
      bor-b(1px, #f5f5f5)

    }
    & h3 {
      height: 14vw;
      flex-x();
      justify-content: flex-start;
      word(30px, #BFBFBF);
    }
  }

  .item {
    flex-x();
    padding: 0 3vw;
    justify-content: space-between;
    background: #fff;
    height: vw(55px);
    margin-bottom: 1px
    & .itemp {
      word(16px, #666);
    }
  }

  .tim {
    word(16px, #BFBFBF);
    flex: 1;
    text-align: right;
  }

  .btn_o {
    width: 100vw;
    flex-x();
    justify-content: center;
    height: vw(55px);
    background: #fff;
    position: fixed;
    bottom: 0;
  }
</style>
